<template>
    <div class="file-agent">
        <div class="bg-white">
            <div class="content">
                <div class="banner section">
                    <img src="/images/application/file-agent/banner.png"/>
                    
                    <div class="card">
                        <div class="header">
                            24小时免费咨询
                        </div>

                        <div class="body">
                            一对一服务，快速准确理解您的切实需求，并为您提供专属的解决方案
                        </div>

                        <div class="footer">
                            <div class="btn" @click="btnClickHandler">
                                {{btnText}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section help">
                    <div class="header">
                        解决您的标书制作难题
                    </div>

                    <div class="body">
                        <div 
                        v-for="(item, index) in helps"
                        :key="index"
                        class="item"
                        >
                            <div class="icon">
                                <img :src="item.img" alt="">
                            </div>

                            <div class="title">
                                {{item.title}}
                            </div>

                            <div class="desc">
                                {{item.desc}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section positive">
                    <div class="header">
                        产品优势
                    </div>

                    <div class="body">
                        <img src="/images/application/file-agent/youshi.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-gray">
            <div class="content">
                <div class="section scope">
                    <div class="header">
                        我们的业务范围
                    </div>

                    <div class="body">
                        <div 
                        v-for="(item, index) in scopes"
                        :key="index"
                        class="item"
                        >
                            <div class="icon">
                                <img :src="item.img" alt="">
                            </div>

                            <div class="title">
                                {{item.title}}
                            </div>

                            <div class="desc">
                                <div 
                                class="word"
                                v-for="(word, i) in item.list"
                                :key="i"
                                >
                                    {{word}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <my-dialog v-model="dialogVisible" width="370px">
            <div class="preferential">
                <div class="title">
                    免费获取标书制作优惠
                </div>
                <div class="phone">
                    咨询电话：{{this.$store.state.config.tel}}
                </div>
            </div>
        </my-dialog>
    </div>
</template>

<script>
import {buildTdk} from '@config/tdk';
import { mapActions } from 'vuex';

export default {
    head() {
        return buildTdk('fileAgent');
    },
    layout: 'client',
    data() {
        return {
            isLogin: null,
            dialogVisible: false,

            helps: [
                {
                    img: '/images/application/file-agent/icon-shijian.png',
                    title: '时间问题',
                    desc: '标书通常需要在规定的截止日期前提交，因此制作团队需要在有限的时间内完成大量工作，包括拟定方案，编写文本，设计排版，收集资料等等。',
                }, 
                {
                    img: '/images/application/file-agent/icon-ziyuan.png',
                    title: '资源不足问题',
                    desc: '标书制作需要大量的人力和物力资源，包括专业知识、人员配备、软件设备等等，如果资源不足，就会影响标书的质量和效率。',
                }, 
                {
                    img: '/images/application/file-agent/icon-shuju.png',
                    title: '数据管理问题',
                    desc: '标书制作过程中需要大量的数据资料，包括规划、设计、预算等等，如果数据管理不当，就会出现遗漏、错误等问题，从而影响标书的准确性和可靠性。',
                }, 
                {
                    img: '/images/application/file-agent/icon-xiezuo.png',
                    title: '协同合作问题',
                    desc: '标书制作需要多个部门和人员协同合作，如果沟通不畅，就会导致信息不对称、重复工作等问题，从而影响标书的质量和效率。',
                }, 
                {
                    img: '/images/application/file-agent/icon-muban.png',
                    title: '模板统一问题',
                    desc: '标书制作需要遵循一定的格式和规范，如果模板不统一，就会影响标书的整体形象和可读性。',
                }, 
            ],

            scopes: [
                {
                    img: '/images/application/file-agent/icon-caigou.png',
                    title: '采购类标书',
                    list: ['校服采购', '食材采购', '设备采购', '汽车采购', '家具采购', '办公采购', '学校采购', '酒店采购', '电脑采购', '机械设备', '设备机油', '医疗器械', ],
                }, 
                {
                    img: '/images/application/file-agent/icon-gongcheng.png',
                    title: '工程类标书',
                    list: ['土建工程', '装饰装修', '机电安装', '道路工程', '景观工程', '种植养护', '设备安装', '桥梁工程', '隧道工程', '市政绿化', '弱电工程', '供电照明', ],
                }, 
                {
                    img: '/images/application/file-agent/icon-fuwu.png',
                    title: '服务类标书',
                    list: ['物业保洁', '物业保安', '食堂服务', '道路保洁', '商场租赁', '劳务外包', '清洗服务', '婚庆服务', '餐饮服务', '礼仪服务', '软件开发', '设备维修', ],
                }, 
            ],
        };
    },
    computed: {
        btnText() {
            if (this.isLogin === null) {
                return '...';
            }

            if (!this.isLogin) {
                return '登录获取优惠'
            }

            return '获取优惠';
        },
    },
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
        btnClickHandler() {
            if (!this.isLogin) {
                this.showLogin();

                return;
            }

            this.dialogVisible = true;
        },
    },
    created() {
        this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
            login: ()=>{
                this.isLogin = true;
            },
            noLogin: () =>{
                this.isLogin = false;
            }, 
        });
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .file-agent{
        .bg-white{
            background: white;
            padding: 22px 0;
        }

        .bg-gray{
            background-color: #f1f5f8;
            padding: 36px 0 50px;
        }
    }

    .section{
        & > .header{
            text-align: center;
            font-size: 20px;
            color: #252525;
            line-height: 1em;
            font-weight: bold;
            margin-bottom: 35px;
        }

        & + .section{
            margin-top: 42px;
        }
    }

    .banner{
        position: relative;

        img{
            display: block;
            width: 100%;
            height: 321px;
            background: #516DF3;
        }

        .card{
            width: 321px;
            padding: 20px 15px;
            position: absolute;
            top: 53px;
            right: 67px;
            background: rgba(255, 255, 255, .22);

            & > .header{
                font-size: 20px;
                color: #ffffff;
                line-height: 1em;
                text-align: center;
                margin-bottom: 20px;
            }

            .body{
                font-size: 14px;
                color: #ffffff;
                line-height: 1.8em;
            }

            .footer{
                text-align: center;
                margin-top: 38px;

                .btn{
                    width: 206px;
                    margin: 0 auto;
                    padding: 14px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 1em;
                    background: white;
                    color: $primaryColor;
                    cursor: pointer;
                }
            }
        }
    }

    .help{
        .header{
            
        }

        .body{
            display: flex;

            .item{
                flex: 1;
                background-color: #f1f5f8;
                padding: 25px;
                height: 353px;
                box-sizing: border-box;

                .icon{
                    img{
                        display: block;
                        height: 42px;
                        margin: 0 auto;
                    }
                }

                .title{
                    text-align: center;
                    font-size: 20px;
                    line-height: 1em;
                    color: #252525;
                    margin: 24px 0;
                    font-weight: bold;
                }

                .desc{
                    font-size: 16px;
                    line-height: 1.5em;
                    color: #252525;
                }

                & + .item{
                    margin-left: 16px;
                }
            }
        }
    }

    .positive{
        .body{
            img{
                display: block;
                width: 1000px;
                margin: 0 auto;
            }
        }
    }

    .scope{
        .body{
            display: flex;

            .item{
                flex: 1;
                background-color: white;
                padding: 25px;
                box-sizing: border-box;

                .icon{
                    img{
                        display: block;
                        height: 42px;
                        margin: 0 auto;
                    }
                }

                .title{
                    text-align: center;
                    font-size: 22px;
                    line-height: 1em;
                    color: #252525;
                    margin: 28px 0;
                    font-weight: bold;
                }

                .desc{
                    display: flex;
                    flex-wrap: wrap;

                    .word{
                        flex: 0 0 33.33%;
                        color: #252525;
                        font-size: 16px;
                        padding: 1em .4em;
                        text-align: center;
                    }
                }

                & + .item{
                    margin-left: 156px;
                }
            }
        }
    }

    .preferential{
        font-weight: bold;
        line-height: 1em;
        margin-top: -30px;

        .title{
            font-size: 16px;
            color: #2c2c2c;
            text-align: center;
        }

        .phone{
            font-size: 20px;
            color: $primaryColor;
            text-align: center;
            margin-top: 40px;
            padding-bottom: 15px;
        }
    }
</style>